<template>
  <div>
    <el-select v-model="fieldValueC" placeholder="请选择">
      <el-option :key="null" :value="null" >请选择</el-option>
      <el-option
        v-for="item in dtOption"
        :key="item.dt_key"
        :label="item.dt_name"
        :value="item.dt_key"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
import { DictionaryTableByTypeKey } from "./DictionaryTableSelectApi";
export default {
  data() {
    return {
      dtOption: [],
    };
  },
  props: {
    //接调用组件的值
    typeKey: String, //字典类别Key
    fieldValue: {}, //绑定属性
  },
  // computed vue计算属性 类似于C#的属性
  computed: {
    //字典绑定字段  在组件内部使用
    fieldValueC: {
      get() {
        return this.fieldValue;
      },
      set(val) {
        // this.fieldValue = val;    不需要此句会引起反复修改（存在不影响效果，但是报错）
        //$emit用于把修改props操作传递给外部组件  把对于province  props的修改同步到父组件
        this.$emit("update:fieldValue", val);
      },
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      DictionaryTableByTypeKey(this.typeKey).then((r) => {
        {
          if (r.data.length > 0) {
            this.dtOption = r.data;
          }
        }
      });
    },
  },
};
</script>
